<ui-component name="box" path="common.form" config="if:~PATH~;title:@(TMS sources);icon:ti ti-code-branch;autofocus:true;reload:?/reload;scrollbar:0;submit:?/submit;width:800" class="hidden" plugin="~PATH~">
	<nav>
		<button class="exec" data-exec="?/add"><i class="ti ti-plus green"></i>@(Add source)</button>
	</nav>
	<div>
		<div class="search">
			<ui-component name="searchinput" path="%sourcessearch" config="placeholder:@(Search apps)"></ui-component>
		</div>
		<ui-component name="viewbox" path="common.form" config="parent:auto;margin:30;scrollbar:1" class="invisible">
			<ui-component name="empty" path="?.items" config="parent:auto" class="invisible">

				<script type="text/html">
					@(You don't have any external TMS sources)
				</script>

				<ui-component name="search" path="%sourcessearch" config="selector:.search">
					<ui-bind path="?.items" config="template">
						<script type="text/html">
							{{ foreach m in value }}
								<div class="sources-item search" data-search="{{ m.url }}" data-id="{{ m.id }}">
									<div class="controls">
										<button title="@(Edit)" class="exec" data-exec="?/edit"><i class="ti ti-pencil"></i></button>
										<button class="red exec" data-exec="?/remove" title="@(Remove)"><i class="ti ti-trash"></i></button>
									</div>
									{{ if m.error }}<div class="code">Error code: <b>{{ m.error }}</b></div>{{ fi }}
									<div class="name"><i class="ti ti-circle-alt {{ if m.online }}green{{ else }}red{{ fi }}"></i> {{ m.name }} <b>{{ m.url | url }}</b></div>
								</div>
							{{ end }}
						</script>
					</ui-bind>
				</ui-component>
			</ui-component>
		</ui-component>
	</div>
	<nav>
		<button name="cancel" style="width:100%">@(Cancel)</button>
	</nav>
</ui-component>

<script>

	PLUGIN(function(exports) {

		exports.reload = function(com) {
			exports.refresh();
		};

		exports.add = function() {
			SET('sourceform @default', {});
			SET('common.form2', 'sourceform');
		};

		exports.refresh = function() {
			FUNC.send({ TYPE: 'sources' }, function(response) {
				var arr = [];
				for (var key in response.data) {
					var item = response.data[key];
					item.id = key;
					arr.push(item);
				}
				arr.quicksort('url');
				exports.scope();
				exports.set('items @hideloading', arr);
			}, true);
		};

		exports.edit = function(el) {
			var id = el.attrd2('id');
			FUNC.send({ TYPE: 'source_read', id: id }, ASETTER('message/response', function(response) {
				SET('sourceform @reset @hideloading', response.data);
				SET('common.form2', 'sourceform');
			}));
		};

		exports.remove = function(el) {
			var id = el.attrd2('id');
			EXEC('-approve/show', '@(Are you sure you want to remove selected source?)', '"trash-o" @(Remove)', function() {
				FUNC.send({ TYPE: 'source_remove', id: id }, ASETTER('message/response', function(response) {
					exports.refresh();
				}));
			});
		};

	});

</script>